<!DOCTYPE html>
<html lang="en">

<head>
	<title>成功就业-小鹿线</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/student.css">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>


	<div class="header">
		<div class="nav">
			<div class="wrap u-clearfix">
				<h1 class='u-l'><img src="images/pic_logo.png"></h1>
				<ul class='u-r u-clearfix'>
					<li class='active'><a href="/">首 页</a></li>
					<li><a href="">学习路线</a></li>
					<li><a href="curriculum.html">在线课程</a></li>
					<li><a href="product.html">产品中心</a></li>
					<li><a href="student.html">成功就业</a></li>
					<li><a href="about.html">关于我们</a></li>
				</ul>
			</div>
		</div>
		<div class="banner">
			<img src="images/pic_background_Students.png">
		</div>

		<div class='student'>
			<div class='student-wrap'>
				<div class='student-select u-clearfix'>
					<ul class='u-l' id="salary">
						<li class='active'>薪资</li>
						<li class='no-border hide'>1k~5k</li>
						<li class="hide">5k~8k</li>
						<li class="hide">8k~11k</li>
						<li class="hide">11k~15k</li>
						<li class="hide">15k~25k</li>
					</ul>
					<ul class='u-l' id="age">
						<li class='active'>年龄</li>
						<li class='no-border hide'>16~18</li>
						<li class="hide">18~22</li>
						<li class="hide">22~26</li>
						<li class="hide">26~30</li>
						<li class="hide">30~35</li>
					</ul>
				</div>
				<ul class='student-list u-clearfix' id="sList">
				</ul>
			</div>
		</div>

	</div>
	<script src="./js/jquery-1.11.min.js"></script>
	<script>
		let stuList = '';
		var page = 1;
		var size = 8;
		var parentId = '';
		var minStr = '';
		var maxStr = '';
		(function () {

			// 请求学生数据
			fAjax(page,size,null,null,null,null);

			$(window).scroll(function () {
				if (fBotton()) {
					// 到达底部 改变ajax
					if(parentId == 'salary'){
						fAjax(page,size,minStr,maxStr,null,null)
					}else if(parentId == 'age'){
						fAjax(page,size,null,null,minStr,maxStr);
					}else{

						fAjax(page,size,null,null,null,null);
					}

				}

			})
			// ajax的封装函数
			function fAjax(page, size,minSalary,maxSalary,minAge,maxAge) {
				$.ajax({
					url: `http://39.101.217.150:8075/jobs/list`,
					type: 'get',
					data: {
						page,
						size,
						salary1:minSalary,
						salary2:maxSalary,
						age1:minAge,
						age2:maxAge,
					},
					success: function (res) {
						let records = res.data.records;
						$.each(records, function (index, item) {
							stuList += `
					
								<li class='u-clearfix'>
								<div class='u-l'><img src='${item.imgurl}'></div>
								<ul class='u-l'>
									<li>姓名：${item.name}</li>
									<li>年龄：${item.age}</li>
									<li>学历：${item.education}</li>
									<li>城市：${item.city}</li>
									<li>薪资：${item.salary}k</li>
								</ul>
							</li> 
							`
						})
						$('#sList').html(stuList);
					}

				})
			}
			// 判断是否滚动触底的函数
			function fBotton() {
				var lis = $('#sList>li');
				var lastLi = lis[lis.length - 1];
				var liTop = parseInt( ($(lastLi).offset().top));
				var liH = lastLi.offsetHeight;
				var clientH = document.documentElement.clientHeight;
				var scrollTop = document.documentElement.scrollTop;
				return clientH + scrollTop >= (liTop + liH);
			}
			// 显式隐藏的实现
			$('#salary').hover(function () { 
				$(this).children('li~li').css('display','block')
			 },function () { 
				$(this).children('li~li').css('display','none')
			  })
			$('#age').hover(function () { 
				$(this).children('li~li').css('display','block')
			 },function () { 
				$(this).children('li~li').css('display','none')
			  })
			//   点击切换数据
			  $('.hide').click(function () {
				stuList = ``;
				// 最小值和最大值
				page = 1;// 重置page
				var arr = $(this).html().split('~')
				minStr = parseInt(arr[0])
				maxStr = parseInt(arr[1])
				parentId = $(this).parent().attr('id')
				// 得到对应的父元素
				if(parentId == 'sarlary'){
					// 点击的是薪资
					fAjax(page,size,minStr,maxStr,null,null)
				}else{
					fAjax(page,size,null,null,minStr,maxStr);

				}

			    })

		})()
	</script>


</body>

</html>